<script setup>
import {
  avatarUpload,
  deleteFileById,
  deleteFileInfoById,
  filePage, folderByPid, getAvatarStr,
  getSpace as Space, getUpdateCode, getUploadInfo, getUploadRecords,
  getUserId, moveByIds, newFolder,
  renameByIdAndName, restoreFileById, searchFile, shardNum, uploadInfo, uploadUser
} from "@/apis/user";
import {onMounted, ref} from "vue";
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Download,
  Edit,
  Folder,
  MostlyCloudy,
  Refresh,
  RefreshLeft,
  Upload,
  UploadFilled, User, Warning
} from "@element-plus/icons-vue";
import ProgressBar from '@/components/progressBar/index.vue'
import UploadProgress from "@/components/uploadProgress/uploadProgress.vue";
import {uploadInfoStore} from "@/stores/uploadStore";
import UploadInfo from "@/views/uploadInfo/index.vue"

import audioIcon from "@/images/icon/audio.png"
import csvIcon from "@/images/icon/csv.png"
import docIcon from "@/images/icon/doc.png"
import exeIcon from "@/images/icon/exe.png"
import fileIcon from "@/images/icon/file.png"
import htmlIcon from "@/images/icon/html.png"
import javaIcon from "@/images/icon/java.png"
import javascriptIcon from "@/images/icon/javascript.png"
import nullIcon from "@/images/icon/null.png"
import pdfIcon from "@/images/icon/pdf.png"
import pptIcon from "@/images/icon/ppt.png"
import rtfIcon from "@/images/icon/rtf.png"
import txtIcon from "@/images/icon/txt.png"
import userIcon from "@/images/icon/user.png"
import videoIcon from "@/images/icon/video.png"
import xlsIcon from "@/images/icon/xls.png"
import xmlIcon from "@/images/icon/xml.png"
import zipIcon from "@/images/icon/zip.png"

import {shardMD5} from "@/utils/FileUtils";
import {
  fileExist,
  preview,
  shardExist,
  uploadSecondsPass,
  uploadShard
} from "@/apis/file";
import {userStore} from "@/stores/UserStore";
import {calculateFileMD5Async} from "@/utils/FileUtils1";
import {formatBytes} from "@/utils/ByteUtil";
import {ElMessage, ElNotification} from "element-plus";
import {toBeContinued} from "@/stores/uploadInfo";
import router from "@/router";
import {logout} from "@/apis/login";
import {getShareLink, parseUrl, share, shareCount, shareList, unShareFile} from "@/apis/share";
import {serverPath} from "@/utils/path";

const updateUserInfo = ref({
  name: "",
  phone: "",
  avatar: "",
  password: "",
  password2: "",
  code: ""
})
const updateDialog = ref(false)
const uis = toBeContinued()
const moveNavigationBar = ref([])
const folderList = ref([{
  fileName: "根目录",
  id: 0
}])
const shareTable = ref([])
const shareStatus = ref(true)
const radio = ref(1)
const loading = ref(false)
const newFolderStatus = ref(false)
const download = ref(true)
const navigationBar = ref([])
const uploadStore = uploadInfoStore()
const category = ref(0)
const rowNum = ref(0)
const renameInput = ref("")
const selectFileIds = ref([])
const selectFileMinioName = ref([])
const searchName = ref("")
const userInfo = userStore()
const fileList = ref([])

const dialogValue = ref({
  incomplete: {
    show: false
  },
  moveFile: {
    show: false
  },
  share: {
    show: false
  },
  link: {
    show: false,
    url: "",
    code: ""
  }
})
const page = ref({
  pageNum: 1,
  pageSize: 30,
  pid: 0,
  page: 0,
  total: 0,
  pages: 0
})
const movePid = ref(0)
const dropdown = ref(null)
const shareLinkUrl = ref("")

function updateUserSubmit() {
  if (updateUserInfo.value.password !== updateUserInfo.value.password2) {
    ElMessage({
      type:"error",
      message:"两次密码不一致"
    })
  } else {
    uploadUser(updateUserInfo.value).then(res => {
      if (res.data.code === 200) {
        updateDialog.value = false
        updateUserInfo.value = {
          name: "",
          phone: "",
          avatar: "",
          password: "",
          password2: "",
          code: ""
        }
      }
    })
  }
}

function uploadAvatar(file) {
  const fileData = new FormData()
  fileData.append('file', file)
  avatarUpload(fileData).then(res => {
    updateUserInfo.value.avatar = res.data.data
  })
  return false
}

function updateInfo() {
  updateDialog.value = true;
  getUploadInfo().then(res => {
    updateUserInfo.value.name = res.data.data.name
    updateUserInfo.value.phone = res.data.data.phone
  })
}

async function copyLink(row) {
  const res = await getShareLink(row.linkId)
  let href = window.location.href;
  href = href.substring(0, href.indexOf("/#/") + 3) + "share?url=" + res.data.data.url
  shareLinkUrl.value = href;
  dialogValue.value.link.code = res.data.data.code
  dialogValue.value.link.show = true
}

async function unshare(row) {
  await unShareFile(row.shareId)

  shareStatus.value = false
  shareList().then(res => {
    shareTable.value = res.data.data
    for (let i = 0; i < shareTable.value.length; i++) {
      shareTable.value[i].show = false
    }
  })
}

function timeRemaining(time) {
  if (time === null) {
    return "永久有效"
  }

  if (new Date(time) < new Date()) {
    return "已过期"
  }

  // 创建 "createTime" 和 "expiryTime" 的日期时间对象
  const expiryTime = new Date(time);

// 计算时间间隔（以毫秒为单位）
  const timeDiff = expiryTime - new Date();

// 将时间间隔转换为小时数
  const hoursRemaining = timeDiff / (1000 * 60 * 60);

// 如果剩余小时数小于 24 小时，显示为小时，否则向上取整为天数
  let displayText = "";
  if (hoursRemaining < 24) {
    displayText = Math.ceil(hoursRemaining) + "小时后过期";
  } else {
    displayText = Math.ceil(hoursRemaining / 24) + "天后过期";
  }

  return displayText;
}

function getShareLinkUrl() {
  let href = window.location.href;
  href = href.substring(0, href.indexOf("/#/") + 3) + "share?url=" + dialogValue.value.link.url
  shareLinkUrl.value = href
}

async function fileToLink() {
  const res = await share(selectFileIds.value, radio.value)
  dialogValue.value.link.url = res.data.data.url
  dialogValue.value.link.code = res.data.data.code
  getShareLinkUrl()
  dialogValue.value.share.show = false
  dialogValue.value.link.show = true
}

async function shareFile() {
  dialogValue.value.share.show = true
}

function clickLogout() {
  // document.cookie = "satoken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  logout().then(res => {
    router.push("/")
  })
}

function userClick() {
  dropdown.value.handleOpen()
}

function thePopUpWindowIsNotCompletedClose() {
  getUsePercentages()
  dialogValue.value.incomplete.show = false
}

async function incompleteButton() {
  const res = await uploadInfo()
  uis.list = res.data.data
  dialogValue.value.incomplete.show = true
}

function moveNavigationBarClick(item) {
  let newMoveNavigationBar = []
  for (let i = 0; i < moveNavigationBar.value.length; i++) {
    if (item.id === moveNavigationBar.value[i].id) {
      break
    } else {
      newMoveNavigationBar.push(moveNavigationBar.value[i])
    }
  }
  moveNavigationBar.value = newMoveNavigationBar

  moveShow(item)
}

function moveClose() {
  folderList.value = [{
    fileName: "根目录",
    id: 0
  }]
  moveNavigationBar.value = []
  movePid.value = -1
  dialogValue.value.moveFile.show = false
}

async function moveIdsPid() {
  if (movePid.value === -1) return
  await moveByIds(selectFileIds.value, movePid.value)
  await search()
  moveClose()
}

async function moveShow(row) {
  if (row.id === undefined) {
    return
  }

  const res = await folderByPid(row.id)
  folderList.value = res.data.data

  folderList.value = folderList.value.filter(item => !selectFileIds.value.includes(item.id))

  movePid.value = row.id
  moveNavigationBar.value.push({
    fileName: row.fileName,
    id: row.id
  })
}

function renameExit(row) {
  if (row.newFolder) {
    fileList.value.shift()
    newFolderStatus.value = false
  }

  renameInput.value = row.fileName;
  row.status = 0;
}

function clickNavigationBar(item) {
  // 如果点击的是最后一个就不做任何事情
  if (item.id === navigationBar.value[navigationBar.value.length - 1].id) {
    return
  }

  let newNavigationBar = []
  for (let i = 0; i < navigationBar.value.length; i++) {
    if (item.id === navigationBar.value[i].id) {
      newNavigationBar.push(navigationBar.value[i])
      break
    }
    newNavigationBar.push(navigationBar.value[i])
  }
  navigationBar.value = newNavigationBar
  page.value.pid = item.id
  getFileList()
}

const createFolder = async () => {
  if (newFolderStatus.value === true) {
    return
  }

  newFolderStatus.value = true
  renameInput.value = ""
  fileList.value.unshift({
    fileName: "",
    show: false,
    status: 1,
    filePid: page.value.pid,
    folderType: 0,
    newFolder: true
  })

}

async function restore(id) {
  if (id !== undefined) {
    await restoreFileById(id)
  } else {
    await restoreFileById(selectFileIds.value)
  }
  await getFileList()
  fileList.value[rowNum.value].show = true
}

async function downloadOne(row) {
  const downloadLink = document.createElement('a');
  downloadLink.href = `${serverPath}/file/download/${encodeURIComponent(row.minioName)}/${encodeURIComponent(row.fileName)}`
  downloadLink.click();
}

async function downloadList() {
  if (download.value === false) {
    ElMessage.error('不能下载文件夹')
    return
  }

  let minioName = []
  let fileName = []
  for (let i = 0; i < selectFileMinioName.value.length; i++) {
    minioName.push(selectFileMinioName.value[i].minioName)
    fileName.push(selectFileMinioName.value[i].fileName)
  }

  // 下载文件
  const downloadLink = document.createElement('a');
  downloadLink.href = `${serverPath}/file/downloadList/${minioName}/${fileName}`
  downloadLink.click();
}

async function uploadRecords() {
  const res = await getUploadRecords()
  uploadStore.setIncompleteFileList(res.data.data)
}

async function search() {

  if (searchName.value.length === 0) {
    await getFileList()
    return
  }

  const res = await searchFile(searchName.value)
  fileList.value = res.data.data
  // 未每个元素添加字段
  for (let i = 0; i < fileList.value.length; i++) {
    // 添加操作按钮显示字段
    fileList.value[i].show = false
    // 添加状态字段
    fileList.value[i].status = 0 // 0:正常状态 1:修改名称状态
  }

}

async function previewById(row) {
  // 打开文件夹
  if (row.folderType === 0) {
    navigationBar.value.push({
      id: row.id,
      name: row.fileName,
    })
    page.value.pid = row.id
    await getFileList()
    return
  }

  // 预览
  const res = await preview(row.fileId)
  const url = window.location.href.replace("/home", "");
  if (res.data.data.type === 2) {
    window.open(`${url}/audio?url=${res.data.data.url}`)
  }
  if (res.data.data.type === 1) {
    window.open(`${url}/video?url=${res.data.data.url}`)
  }

}

async function deleteFileByIds(del) {
  if (del === 0) {
    await deleteFileById(selectFileIds.value)
  } else {
    await deleteFileInfo(selectFileIds.value)
  }

  await getFileList();
}

const updateProgress = (progress, uid) => {
  const findStore = uploadStore.parses.find(item => item.uid === uid);
  findStore.parse = progress.toFixed(2)
  if (findStore.parse >= 100) {
    findStore.status = 1
  }

}

function handleChange(file) {
  uploadStore.addParses({
    uid: file.uid,
    parse: 0,
    state: 0,
    lackSpace: false
  })
  uploadStore.addFileList(file)
}

const fileMd5List = ref([])

// 上传前的操作
async function beforeUpload(file) {
  // 计算文件 md5
  const fileMd5 = await calculateFileMD5Async(file, updateProgress);
  // 判断文件是否存在
  const fileMd5Exist = await fileExist(fileMd5)
  if (fileMd5Exist.data.data === "true") {
    // 秒传
    let fileSeconds = {
      fileName: file.name,
      minioName: fileMd5Exist.data.msg,
      filePid: page.value.pid
    }
    const res = await uploadSecondsPass(fileSeconds)
    if (res.data.code === 501) {
      const item = uploadStore.fileList.find(item => item.uid === file.uid);
      item.lackSpace = true
      ElMessage({
        type: "error",
        message: "空间不足"
      })
    } else {
      // 将上传进度拉满
      const findStore = uploadStore.fileList.find(item => item.uid === file.uid);
      findStore.percentage = 100.00;
      await getUsePercentages()
      await getFileList()
    }
    return false;
  }

  for (let i = 0; i < fileMd5List.value.length; i++) {
    if (fileMd5List.value[i] === fileMd5) {
      uploadStore.fileList = uploadStore.fileList.filter(item => item.uid !== file.uid)
      return false
    }
  }
  fileMd5List.value.push(fileMd5)

  // 将文件分割成多个片段
  const chunkSize = 5 * 1024 * 1024; // 5MB
  let start = 0;
  let num = 1;
  let total = Math.ceil(file.size / chunkSize)

  // 如果是二次上传
  const find = uis.list.find(item => item.fileMd5 === fileMd5);
  if (find !== undefined) {
    start = find.count * 5 * 1024 * 1024
    num = find.count + 1
  }

  async function uploadNextChunk() {
    if (start < file.size) {
      // 切片
      const end = Math.min(start + chunkSize, file.size);
      const chunk = file.slice(start, end);
      start = end;

      // 计算分片 md5
      const shardMd5 = await shardMD5(chunk);
      const resp = await shardExist(shardMd5)
      if (resp.data.data === true) {
        // 分片数量+1
        num++;

        const totalProgress = ((num - 1) * 100) / total;
        uploadStore.fileList.forEach(item => {
          if (item.uid === file.uid) {
            item.percentage = totalProgress.toFixed(2);
          }
        });

        // 递归调用以处理下一个分片
        await uploadNextChunk();
      } else {
        // 创建分片信息对象
        let fileShard = {
          shardName: userInfo.userId + "-" + fileMd5 + "-" + num, // 分片名
          suffixName: file.name.indexOf(".") !== -1 ? file.name.substring(file.name.lastIndexOf(".")) : "", // 文件后缀
          fileName: file.name,
          currentShard: num, // 当前分片数
          totalShards: total, // 总分片数
          last: num === total ? 1 : 0, // 是否最后一个分片
          fileMd5: fileMd5, // 文件md5
          shardMd5: shardMd5, // 分片md5
          filePid: page.value.pid, // 父级id
        };

        // 上传分片
        const res = await uploadChunk(chunk, fileShard, num, total, file.uid);
        if (res.data.code === 501) {
          const item = uploadStore.fileList.find(item => item.uid === file.uid);
          item.lackSpace = true
          uis.num++
          ElMessage({
            type: "error",
            message: "空间不足"
          })
          return false
        }

        // 分片数量+1
        num++;

        // 递归调用以处理下一个分片
        await uploadNextChunk();
      }
    }
  }

  // 调用第一个分片上传
  await uploadNextChunk();

  // 上传完成刷新
  await getFileList()

  // 阻止默认的文件上传行为
  return false;
}

// 上传
async function uploadChunk(chunk, fileShard, num, total, uid) {
  return new Promise((resolve, reject) => {
    // 创建FormData对象，将片段和其他参数一起发送
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('fileShard', JSON.stringify(fileShard));

    // 使用axios发送分片上传请求
    uploadShard(formData,
        (progressEvent) => {
          // 获取上传进度
          const chunkProgress = (progressEvent.loaded / progressEvent.total) * 100;
          const totalProgress = ((num - 1) * 100 + chunkProgress) / total;
          uploadStore.fileList.forEach(item => {
            if (item.uid === uid) {
              item.percentage = totalProgress.toFixed(2)
            }
          })
        })
        .then((response) => {
          // 处理上传成功的响应
          resolve(response);
          getUsePercentages()
          shardNum().then(res => {
            uis.num = res.data.data
          })
        })
        .catch((error) => {
          // 处理上传失败的错误
          reject(error);
          getUsePercentages()
        });
  })
}

async function getFileList(num) {
  if (num !== undefined) {
    category.value = num
  }

  const res = await filePage(page.value.pid, page.value.page, category.value)
  fileList.value = res.data.data
  // 未每个元素添加字段
  for (let i = 0; i < fileList.value.length; i++) {
    // 添加操作按钮显示字段
    fileList.value[i].show = false
    // 添加状态字段
    fileList.value[i].status = 0 // 0:正常状态 1:修改名称状态
  }
}

function date(timestamp) {
  const time = new Date(timestamp).getTime();
// 创建一个 Date 对象，将时间戳传递给构造函数
  const date = new Date(time);

// 使用 Date 对象的方法获取各个时间部分
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 注意月份从 0 开始
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

// 将获取到的时间部分拼接成指定格式
  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")} ${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}

function imagePreview(row) {
  const fileName = row.fileName
  const fileId = row.fileId;
  // 如果是图片类型
  const image = ["jpg", "jpeg", "png", "gif", "bmp", "webp"]
  const video = ["mp4", "avi", "mkv", "mov", "wmv", "flv", "mpeg", "webm", "3gp"]
  const audio = ["mp3", "wav", "ogg", "flac", "aac", "wma", "m4a", "opus", "mid", "midi", "amr", "ac3", "ape"]
  const documentation = ["pdf", "doc", "docx", "ppt", "pptx", "xls", "xlsx", "txt", "rtf", "csv", "html", "xml"]
  const zip = ["zip", "rar", "7z", "tar", "gz", "bz2"];
  if (row.folderType === 0) {
    return fileIcon
  } else if (image.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return `${serverPath}/preview/thumbnail/${fileId}`
  } else if (video.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return videoIcon
  } else if (audio.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return audioIcon
  } else if (zip.some(ext => fileName.toLowerCase().endsWith(ext))) {
    return zipIcon
  } else if (fileName.toLowerCase().endsWith("java") || fileName.toLowerCase().endsWith("jar")) {
    return javaIcon
  } else if (fileName.toLowerCase().endsWith("javascript")) {
    return javascriptIcon
  } else if (fileName.toLowerCase().endsWith("exe")) {
    return exeIcon
  } else if (documentation.some(ext => fileName.toLowerCase().endsWith(ext))) {
    if (fileName.toLowerCase().endsWith("pdf")) {
      return pdfIcon
    } else if (fileName.toLowerCase().endsWith("doc") || fileName.toLowerCase().endsWith("docx")) {
      return docIcon
    } else if (fileName.toLowerCase().endsWith("ppt") || fileName.toLowerCase().endsWith("pptx")) {
      return pptIcon
    } else if (fileName.toLowerCase().endsWith("xls") || fileName.toLowerCase().endsWith("xlsx")) {
      return xlsIcon
    } else if (fileName.toLowerCase().endsWith("txt")) {
      return txtIcon
    } else if (fileName.toLowerCase().endsWith("rtf")) {
      return rtfIcon
    } else if (fileName.toLowerCase().endsWith("csv")) {
      return csvIcon
    } else if (fileName.toLowerCase().endsWith("html")) {
      return htmlIcon
    } else if (fileName.toLowerCase().endsWith("xml")) {
      return xmlIcon
    }
  } else {
    return nullIcon
  }
  // return `http://192.168.151.78:80/preview/thumbnail/${fileId}`
}

let hoverTimer = null;

function hover(row) {
  // hoverTimer = setTimeout(() => {
  //   row.show = true; // 显示相关内容
  // }, 300);
}

function noHover(row) {
  // clearTimeout(hoverTimer);
  // for (let i = 0; i < fileList.value.length; i++) {
  //   // 添加操作按钮显示字段
  //   fileList.value[i].show = false
  // }
  // row.show = false; // 隐藏相关内容
}

async function deleteFile(fileIds) {
  const res = await deleteFileById(fileIds)
  if (res.data.code === 200) {
    await getFileList()
  }
}

async function clickDeleteFile(row) {
  const res = await deleteFileById(row.id)
  if (res.data.code === 200) {
    await getFileList()
    fileList.value[rowNum.value].show = true
  }
}

async function deleteFileInfo(fileIds) {
  const res = await deleteFileInfoById(fileIds)
  await search()
  fileList.value[rowNum.value].show = true
  await getUsePercentages()
}

async function rename(row) {
  for (let i = 0; i < fileList.value.length; i++) {
    fileList.value[i].status = 0
  }
  row.status = 1;
  renameInput.value = row.fileName
}

async function renameSubmit(row) {
  if (row.newFolder) {
    newFolderStatus.value = false
  }

  if (row.folderType === 0 && row.id === undefined) {
    row.status = 0
    await newFolder(page.value.pid, renameInput.value)
  } else {
    await renameByIdAndName(row.id, encodeURIComponent(renameInput.value))
  }

  if (searchName.value.length > 0) {
    await search()
  } else {
    await getFileList()
  }
}

function handleSelectionChange(selection) {
  const find = selection.find(item => item.folderType === 0);
  if (find === undefined) {
    download.value = true
  } else {
    download.value = false
  }

  selectFileIds.value = []
  selectFileMinioName.value = []
  for (let i = 0; i < selection.length; i++) {
    selectFileIds.value.push(selection[i].id)
    selectFileMinioName.value.push({
      minioName: selection[i].minioName,
      fileName: selection[i].fileName
    })
  }


}

function clickShareColumnTable(row, column, cell, event) {
  if (column.label === "状态") {
    row.show = false
  }
}

function clickShareTable(row, column, cell, event) {
  row.show = !row.show
}

function clickTable(row) {
  // 当前行数据保存
  rowNum.value = fileList.value.indexOf(row)
}

// 挂载完毕后
onMounted(() => {
  // 设置分页信息
  page.value.pageNum = 1
  page.value.pageSize = 30
  page.value.pid = 0
  // 查看是否有未完成任务
  shardNum().then(res => {
    uis.num = res.data.data
    if (uis.num > 0) {
      ElNotification({
        title: '通知',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        message: `你有文件未上传完成, 你可以找到该文件继续上传, 或者点击上方红色图标删除它`,
        offset: 30,
        duration: 0,
      })
    }
  })
  // 查看文件列表
  getFileList()
  // 获取使用空间
  getUsePercentages()
  // 获取当前登陆人id
  getUserId().then(resp => {
    userInfo.setUserId(resp.data.data)
  })
})

const space = ref({
  total: 0,
  use: 0,
})

const menu = ref(1)

// 单机一级菜单
const oneMenuClick = (item) => {
  document.getElementById("oneItem1").style.color = "#000000"
  document.getElementById("oneItem2").style.color = "#000000"
  document.getElementById("oneItem3").style.color = "#000000"
  document.getElementById(item).style.color = '#00BFFF'
  menu.value = item.substring(item.length - 1)

  if (item === "oneItem3") {
    page.value.page = 1
  } else if (item === "oneItem1") {
    page.value.page = 0
  } else if (item === "oneItem2") {
    shareStatus.value = false
    shareList().then(res => {
      shareTable.value = res.data.data
      if (shareTable.value)
        for (let i = 0; i < shareTable.value.length; i++) {
          shareTable.value[i].show = false
        }
    })
    return
  }
  shareStatus.value = true
  getFileList()
}

//单击二级菜单
const twoMenuClick = (item) => {
  document.getElementById("twoItem1").style.color = "#000000"
  document.getElementById("twoItem1").style.backgroundColor = "#ffffff"
  document.getElementById("twoItem2").style.color = "#000000"
  document.getElementById("twoItem2").style.backgroundColor = "#ffffff"
  document.getElementById("twoItem3").style.color = "#000000"
  document.getElementById("twoItem3").style.backgroundColor = "#ffffff"
  document.getElementById("twoItem4").style.color = "#000000"
  document.getElementById("twoItem4").style.backgroundColor = "#ffffff"
  document.getElementById("twoItem5").style.color = "#000000"
  document.getElementById("twoItem5").style.backgroundColor = "#ffffff"
  document.getElementById("twoItem6").style.color = "#000000"
  document.getElementById("twoItem6").style.backgroundColor = "#ffffff"
  document.getElementById(item).style.color = '#00BFFF'
  document.getElementById(item).style.backgroundColor = '#f0f9ff'
  if (item === "twoItem1") {
    category.value = 0
    getFileList()
  } else if (item === "twoItem2") {
    category.value = 1
    getFileList()
  } else if (item === "twoItem3") {
    category.value = 2
    getFileList()
  } else if (item === "twoItem4") {
    category.value = 3
    getFileList()
  } else if (item === "twoItem5") {
    category.value = 4
    getFileList()
  } else if (item === "twoItem6") {
    category.value = 5
    getFileList()
  }
}

const getUsePercentages = async () => {
  const res = await Space()
  space.value.use = res.data.data.use
  space.value.total = res.data.data.total
}

</script>

<template>
  <div class="container">
    <!--头-->
    <header class="header">
      <!--左边log-->
      <div class="header-left">
        <div class="header-icon-div">
          <el-icon class="header-icon" style="color: deepskyblue" size="40">
            <UploadFilled/>
          </el-icon>
        </div>
        <div class="header-icon-div"><span class="header-text">Simple云盘</span></div>
      </div>
      <!--右边内容-->
      <div class="header-right">
        <!--未完成文件-->
        <div class="smallHands" v-if="uis.num > 0">
          <el-icon size="20" @click="incompleteButton()" style="margin-right: 15px; color: red">
            <Warning/>
          </el-icon>
        </div>
        <!--上传记录按钮-->
        <div class="right1">
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-icon @click="uploadRecords" size="20">
                <Upload/>
              </el-icon>
            </template>
            <div @click="uploadStore.clearSuccess" title=""
                 style="display: flex;justify-content: flex-end;margin-left: auto;margin-right: 30px;cursor: pointer">
              清除记录
            </div>
            <el-table max-height="500" :data="uploadStore.fileList" v-if="uploadStore.fileList.length > 0">
              <el-table-column>
                <template v-slot="scope">
                  <upload-progress
                      :parse="parseFloat(uploadStore.parses.find(item => item.uid === scope.row.uid).parse)"
                      :upload="parseFloat(scope.row.percentage)"
                      :name="scope.row.name"
                      :lack-space="scope.row.lackSpace"/>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="uploadStore.fileList.length === 0"
                 style="display: flex;align-content: center;align-items: center;justify-content: center; height: 50px;">
              <span>当前没有任务</span>
            </div>
          </el-popover>
        </div>
        <!-- 用户信息 -->
        <div class="right2">
          <el-dropdown ref="dropdown" trigger="contextmenu" style="margin-right: 30px">
            <el-icon @click="userClick" size="20" class="smallHands">
              <el-image :src="serverPath + '/user/getAvatar'"></el-image>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="updateInfo">修改信息</el-dropdown-item>
                <el-dropdown-item @click="clickLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </div>
    </header>
    <!--内容-->
    <div class="menu">
      <!--一级菜单-->
      <div class="menu-list">
        <router-link class="link" @click="page.pid = 0;navigationBar = [];getFileList(0);" to="/home">
          <div class="menu-item" id="oneItem1" style="color: #00BFFF" @click="oneMenuClick('oneItem1')">
            <div class="icon">
              <el-icon :size="30">
                <MostlyCloudy/>
              </el-icon>
            </div>
            <div class="text">首页</div>
          </div>
        </router-link>

        <div class="menu-item" id="oneItem2" @click="oneMenuClick('oneItem2')">
          <div class="icon">
            <el-icon :size="30">
              <MostlyCloudy/>
            </el-icon>
          </div>
          <div class="text">分享</div>
        </div>
        <div class="menu-item" id="oneItem3" @click="page.pid = 0;navigationBar = [];oneMenuClick('oneItem3')">
          <div class="icon">
            <el-icon :size="30">
              <MostlyCloudy/>
            </el-icon>
          </div>
          <div class="text">回收站</div>
        </div>
      </div>
      <!-- 二级菜单 -->
      <div class="menuTwo">
        <!-- 二级菜单按钮 -->
        <div class="menu-sub-list">
          <div v-if="menu == 1" style="display: flex; flex-direction: column">
            <div @click="twoMenuClick('twoItem1')" class="menu-item-sub-list menu-item-top" style="color: #00BFFF"
                 id="twoItem1">
              <div class="icon2">
                <el-icon>
                  <Folder/>
                </el-icon>
              </div>
              <div class="text2"><span class="text">全部</span></div>
            </div>
            <div @click="twoMenuClick('twoItem2')" class="menu-item-sub-list" id="twoItem2">
              <div class="icon2">
                <el-icon>
                  <Folder/>
                </el-icon>
              </div>
              <div class="text2"><span class="text">视频</span></div>
            </div>
            <div @click="twoMenuClick('twoItem3')" class="menu-item-sub-list" id="twoItem3">
              <div class="icon2">
                <el-icon>
                  <Folder/>
                </el-icon>
              </div>
              <div class="text2"><span class="text">音频</span></div>
            </div>
            <div @click="twoMenuClick('twoItem4')" class="menu-item-sub-list" id="twoItem4">
              <div class="icon2">
                <el-icon>
                  <Folder/>
                </el-icon>
              </div>
              <div class="text2"><span class="text">图片</span></div>
            </div>
            <div @click="twoMenuClick('twoItem5')" class="menu-item-sub-list" id="twoItem5">
              <div class="icon2">
                <el-icon>
                  <Folder/>
                </el-icon>
              </div>
              <div class="text2"><span class="text">文档</span></div>
            </div>
            <div @click="twoMenuClick('twoItem6')" class="menu-item-sub-list" id="twoItem6">
              <div class="icon2">
                <el-icon>
                  <Folder/>
                </el-icon>
              </div>
              <div class="text2"><span class="text">其他</span></div>
            </div>
          </div>
          <div v-if="menu == 2">
            <div class="menu-item-sub-list menu-item-top" style="color: #00BFFF">
              <div class="text2"><span class="text">分享记录</span></div>
            </div>
          </div>
          <div v-if="menu == 3">
            <div class="menu-item-sub-list menu-item-top" style="color: #00BFFF;">
              <div class="text2"><span class="text">回收站</span></div>
            </div>
          </div>
        </div>
        <!--空间使用-->
        <div class="progressBar" @click="getUsePercentages">
          <progress-bar :use="space.use" :total="space.total"/>
        </div>
      </div>
      <!--内容-->
      <div class="content">
        <!--<router-view/>-->
        <div class="all">
          <!--顶部-->
          <header class="head">
            <!--按钮-->
            <div style="display: flex" v-if="shareStatus">
              <div v-if="page.page === 0 && category === 0" class="button btn" style="margin-right: -10px">
                <el-upload
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-change="handleChange"
                    multiple
                >
                  <el-button type="success">点击上传</el-button>
                </el-upload>
              </div>
              <div v-if="page.page === 0 && category === 0" class="button">
                <el-button type="info" @click="createFolder">新建文件夹</el-button>
              </div>
              <div v-if="page.page === 0 && selectFileIds.length > 0" class="button">
                <el-button type="danger" @click="deleteFileByIds(0)">批量删除</el-button>
              </div>
              <div v-if="page.page === 0 && selectFileIds.length === 0" class="button">
                <el-button type="danger" disabled @click="deleteFileByIds(0)">批量删除</el-button>
              </div>
              <div v-if="page.page === 1 && selectFileIds.length > 0" class="button">
                <el-button type="danger" @click="deleteFileByIds(1)">批量删除</el-button>
              </div>
              <div v-if="page.page === 1 && selectFileIds.length === 0" class="button">
                <el-button type="danger" disabled @click="deleteFileByIds(1)">批量删除</el-button>
              </div>
              <div v-if="page.page === 1 && selectFileIds.length > 0" class="button">
                <el-button type="primary" @click="restore(undefined)">批量还原</el-button>
              </div>
              <div v-if="page.page === 1 && selectFileIds.length === 0" class="button">
                <el-button type="primary" disabled @click="restore(undefined)">批量还原</el-button>
              </div>
              <div v-if="page.page === 0 && selectFileIds.length > 0" class="button">
                <el-button type="primary" @click="downloadList">批量下载</el-button>
              </div>
              <div v-if="page.page === 0 && selectFileIds.length === 0" class="button">
                <el-button type="primary" disabled @click="downloadList">批量下载</el-button>
              </div>
              <div v-if="page.page === 0 && category === 0 && selectFileIds.length > 0" class="button">
                <el-button type="warning" @click="dialogValue.moveFile.show = true">批量移动</el-button>
              </div>
              <div v-if="page.page === 0 && category === 0  && selectFileIds.length === 0" class="button">
                <el-button type="warning" disabled>批量移动</el-button>
              </div>
              <div v-if="page.page === 0 && category === 0 && selectFileIds.length > 0" class="button">
                <el-button type="default" style="border: 1px solid #c3eaff;" @click="shareFile">分享</el-button>
              </div>
              <div v-if="page.page === 0 && category === 0  && selectFileIds.length === 0" class="button">
                <el-button type="default" style="border: 1px solid #c3eaff;" disabled>分享</el-button>
              </div>
              <div v-if="page.page === 0" class="button smallHands" @click="getFileList()"
                   style="display: flex;align-items: center;align-content: center;">
                <el-icon size="18">
                  <Refresh/>
                </el-icon>
              </div>
            </div>

            <!--搜索框-->
            <div v-if="shareStatus" class="search">
              <el-input
                  v-model="searchName"
                  size="small"
                  placeholder="输入文件名搜索"
                  style="width: 300px; height: 32px"
                  @change="search"
              >
                <template #suffix>
                  <el-icon class="smallHands" @click="search">
                    <Search/>
                  </el-icon>
                </template>
              </el-input>
            </div>
          </header>
          <!--内容-->
          <div class="body1">
            <!--文件夹导航-->
            <div v-if="category === 0" style="margin-top: 10px">
              <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item @click="page.pid = 0;searchName = '';navigationBar = [];getFileList(0)">
                  <span class="smallHands"
                        style="font-size: 10px;font-weight: bold;color: #6e6e6e;user-select: none;">
                    全部文件
                  </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-for="item in navigationBar">
                  <span class="smallHands" @click="clickNavigationBar(item)"
                        style="font-size: 10px;font-weight: bold;color: #6e6e6e;user-select: none;">
                    {{ item.name }}
                  </span>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!--文件表格-->
            <div v-if="shareStatus" class="table">
              <el-table
                  :data="fileList"
                  v-loading="loading"
                  style="width: 100%;"
                  max-height=600
                  v-if="fileList.length > 0"
                  @cell-mouse-enter="hover"
                  @cell-mouse-leave="noHover"
                  @selection-change="handleSelectionChange"
                  @row-click="clickTable"
              >
                <!--选择框-->
                <el-table-column type="selection" width="30"/>
                <!--文件名-->
                <el-table-column width="500" label="文件名">
                  <template v-slot="scope">
                    <div class="smallHands" style="display: flex">
                      <!-- 图片 -->
                      <div style="display: flex;align-items: center;align-content: center; margin-right: 12px;">
                        <img style="height: 30px;width: 30px;user-select: none;" :src="imagePreview(scope.row)">
                      </div>
                      <!-- 正常状态显示名称 -->
                      <div @click="previewById(scope.row)"
                           style="display: flex;align-items: center;width: 400px;align-content: center"
                           v-if="scope.row.status === 0"
                           class="smallHands">
                        <span
                            style="font-size: 12px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none;">{{
                            scope.row.fileName
                          }}</span>
                      </div>
                      <!-- 重命名状态 -->
                      <div v-if="scope.row.status === 1" style="display: flex;max-height: 30px">
                        <div style="display: flex;align-content: center;align-items: center">
                          <el-input v-model="renameInput"
                                    @keydown.esc="renameExit(scope.row)"
                                    @keydown.enter="renameSubmit(scope.row)" style="width: 300px;height: 30px"/>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <!--操作按钮-->
                <el-table-column width="200">
                  <template v-slot="scope">
                    <div style="display: flex;">
                      <div v-if="page.page === 0" class="operate" v-show="scope.row.show === true">
                        <!--分享-->
                        <div class="smallHands" title="分享">
                          <el-icon size="15">
                            <Share/>
                          </el-icon>
                        </div>
                        <!--下载-->
                        <div v-if="scope.row.folderType === 1" @click="downloadOne(scope.row)" class="smallHands"
                             title="下载">
                          <el-icon size="15">
                            <Download/>
                          </el-icon>
                        </div>
                        <!--删除-->
                        <div class="smallHands" @click="clickDeleteFile(scope.row)" title="删除">
                          <el-icon size="15">
                            <Delete/>
                          </el-icon>
                        </div>
                        <!--重命名-->
                        <div class="smallHands" @click="rename(scope.row)" title="重命名">
                          <el-icon size="15">
                            <Edit/>
                          </el-icon>
                        </div>
                      </div>
                      <div v-if="page.page === 1" class="operate" v-show="scope.row.show === true">
                        <!--删除-->
                        <div class="smallHands" @click="deleteFileInfo(scope.row.id)" title="删除">
                          <el-icon size="15">
                            <Delete/>
                          </el-icon>
                        </div>
                        <!--还原-->
                        <div class="smallHands" @click="restore(scope.row.id)" title="还原">
                          <el-icon size="15">
                            <RefreshLeft/>
                          </el-icon>
                        </div>
                      </div>
                      <div
                          style="display: flex;align-items: center;align-content: center;justify-content: flex-end;margin-left: auto">
                        <el-icon class="smallHands" v-if="scope.row.show === false" size="15"
                                 @click="scope.row.show = true">
                          <ArrowLeft/>
                        </el-icon>
                        <el-icon class="smallHands" v-if="scope.row.show === true" size="15"
                                 @click="scope.row.show = false">
                          <ArrowRight/>
                        </el-icon>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <!--上传时间-->
                <el-table-column v-if="page.page === 0" prop="" label="上传时间">
                  <template v-slot="scope">
                    <div class="smallHands">
                      <span
                          style="font-size: 12px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none;">
                      {{ date(scope.row.updateTime) }}
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <!--删除时间-->
                <el-table-column v-if="page.page === 1" prop="" label="删除时间">
                  <template v-slot="scope">
                    <div class="smallHands">
                      <span style="font-size: 12px;font-weight: 600;user-select: none;">
                      {{ date(scope.row.recoveryTime) }}
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <!--文件大小-->
                <el-table-column prop="fileSize" label="大小">
                  <template v-slot="scope">
                    <span
                        style="font-size: 12px;font-weight: 600;user-select: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{
                        formatBytes(scope.row.fileSize)
                      }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!--表格无数据时显示-->
              <div v-if="fileList.length == 0 && page.page === 0"
                   style="display: flex;align-items: center;align-content: center;justify-content: center;height: 500px">
                <el-upload
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-change="handleChange"
                    multiple
                    drag
                >
                  <el-icon class="el-icon--upload">
                    <upload-filled/>
                  </el-icon>
                  <div class="el-upload__text">
                    点击上传
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      当前目录为空，上传你的第一个文件吧
                    </div>
                  </template>
                </el-upload>
              </div>
            </div>
            <div v-if="!shareStatus" class="table">
              <el-table
                  :data="shareTable"
                  style="width: 100%;"
                  max-height=600
                  v-if="shareTable.length > 0"
                  @selection-change="handleSelectionChange"
                  @row-click="clickShareTable"
                  @cell-click="clickShareColumnTable"
              >
                <el-table-column type="selection" width="30"/>
                <el-table-column label="分享文件" width="500">
                  <template v-slot="scope">
                    <div style="display: flex;">
                      <div style="display: flex;align-items: center;align-content: center; margin-right: 12px;">
                        <img style="height: 30px;width: 30px;user-select: none;" :src="imagePreview(scope.row)">
                      </div>
                      <div style="display: flex;align-items: center;width: 400px;align-content: center">
                        <span
                            style="font-size: 12px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none;">{{
                            scope.row.fileName
                          }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="分享时间">
                  <template v-slot="scope">
                    <div>
                      <span
                          style="font-size: 12px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none;">
                      {{ date(scope.row.createTime) }}
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="状态">
                  <template v-slot="scope">
                    <div v-if="scope.row.show === false"><span
                        style="user-select: none;font-size: 12px;font-weight: bold">{{
                        timeRemaining(scope.row.expiryTime)
                      }}</span></div>
                    <div v-if="scope.row.show === true">
                      <el-link style="color: #40a9fd;user-select: none" @click="copyLink(scope.row)">查看链接</el-link>
                      <el-link style="color: #40a9fd;margin-left: 15px;user-select: none" @click="unshare(scope.row)">
                        取消分享
                      </el-link>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="浏览次数">
                  <template v-slot="scope">
                    <span style="user-select: none;font-size: 12px;font-weight: bold">{{ scope.row.count }}次</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 各种弹窗 -->
  <!-- 未完成上传的文件弹窗 -->
  <el-dialog :before-close="thePopUpWindowIsNotCompletedClose" v-model="dialogValue.incomplete.show" title="不完整文件">
    <UploadInfo/>
  </el-dialog>
  <!--移动文件弹窗-->
  <el-dialog
      v-model="dialogValue.moveFile.show"
      title="移动文件"
      width="30%"
      :before-close="moveClose"
  >
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="item in moveNavigationBar">
                  <span class="smallHands" @click="moveNavigationBarClick(item)"
                        style="font-size: 10px;font-weight: bold;color: #6e6e6e;user-select: none;">
                    {{ item.fileName }}
                  </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="folderList">
      <el-table-column prop="fileName">
        <template v-slot="scope">
          <div class="smallHands" style="display: flex">
            <!-- 图片 -->
            <div style="display: flex;align-items: center;align-content: center; margin-right: 12px;">
              <img style="height: 30px;width: 30px;user-select: none;" :src="fileIcon">
            </div>
            <div @click="moveShow(scope.row)"
                 style="display: flex;align-items: center;width: 400px;align-content: center"
                 class="smallHands">
                        <span
                            style="font-size: 7px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none;">
                          {{ scope.row.fileName }}
                        </span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="moveIdsPid" v-if="moveNavigationBar.find(item => item.id === 0) !== undefined">确定</el-button>
    </template>
  </el-dialog>
  <!--分享文件弹窗-->
  <el-dialog v-model="dialogValue.share.show" title="分享文件">
    <div style="display: flex;align-content: center;align-items: center">
      <span>有效期: </span>
      <el-radio-group v-model="radio" style="margin-left: 40px">
        <el-radio :label="1">1 天</el-radio>
        <el-radio :label="7">7 天</el-radio>
        <el-radio :label="30">30 天</el-radio>
        <el-radio :label="0">永久有效</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="fileToLink">
          创建链接
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!--生成链接弹窗-->
  <el-dialog v-model="dialogValue.link.show" title="链接">
    <div style="display: flex;align-content: center;height: 100px;flex-direction: column">
      <div>
        <span style="user-select: none;">链接: </span>
      </div>
      <div>
        <span style="">{{ shareLinkUrl }}</span>
      </div>

    </div>
    <div>
      <span style="user-select: none;">密码: </span>
      <span> {{ dialogValue.link.code }} </span>
    </div>
  </el-dialog>
  <!--更新用户信息弹窗-->
  <el-dialog v-model="updateDialog" title="修改信息" style="width: 740px">
    <div style="display:flex;align-content: center;align-items: center;">
      <div style="display:flex;align-content: center;align-items: center;">
        <div style="margin-right: 10px;width: 50px"><span style="font-size: 12px;font-weight: bold;">名称</span></div>
        <div>
          <el-input placeholder="请输入用户名" style="width: 250px" v-model="updateUserInfo.name"></el-input>
        </div>
      </div>

      <div style="display:flex;align-content: center;align-items: center;margin-left: 30px">
        <div style="margin-right: 10px;width: 50px"><span style="font-size: 12px;font-weight: bold;">密码</span></div>
        <div>
          <el-input placeholder="请输入密码" type="password" show-password v-model="updateUserInfo.password"
                    style="width: 250px"></el-input>
        </div>
      </div>
    </div>

    <div style="display:flex;align-content: center;align-items: center;margin-top: 20px">
      <div style="display:flex;align-content: center;align-items: center;">
        <div style="margin-right: 10px;width: 50px"><span style="font-size: 12px;font-weight: bold;">手机号</span></div>
        <div>
          <el-input placeholder="请输入新手机号" v-model="updateUserInfo.phone" style="width: 250px"></el-input>
        </div>
      </div>

      <div style="display:flex;align-content: center;align-items: center;margin-left: 30px">
        <div style="margin-right: 10px;width: 50px"><span style="font-size: 12px;font-weight: bold;">重复密码</span>
        </div>
        <div>
          <el-input placeholder="请重复输入密码" type="password" show-password v-model="updateUserInfo.password2"
                    style="width: 250px"></el-input>
        </div>
      </div>
    </div>

    <div style="display:flex;align-content: center;align-items: center;margin-top: 20px">
      <div style="display:flex;align-content: center;align-items: center;">
        <div style="margin-right: 10px;width: 50px"><span style="font-size: 12px;font-weight: bold;">验证码</span></div>
        <div>
          <el-input placeholder="输入验证码" v-model="updateUserInfo.code" style="width: 250px">
            <template #suffix>
              <el-link :underline="false" style="color: #50a6ff;" @click="getUpdateCode">发送验证码</el-link>
            </template>
          </el-input>
        </div>
      </div>

      <div style="margin-left: 90px">
        <el-upload
            style="display: flex;align-content: center;align-items: center"
            :show-file-list="false"
            :before-upload="uploadAvatar"
        >
          <el-button type="success">上传头像</el-button>
        </el-upload>
      </div>
    </div>


    <template #footer>
      <div style="margin-right: 30px">
        <el-button type="primary" @click="updateUserSubmit">保存</el-button>
        <el-button @click="updateDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 音乐预览弹窗 -->
  <!--<el-dialog v-model="dialogValue.music.show" :title="dialogValue.music.name" :close-on-click-modal="false" :modal="false" width="22%" draggable>
    <audio controls>
      <source ref="audioPlayer" :src="dialogValue.music.url">
    </audio>
    </audio>
  </el-dialog>-->
  <!--视频预览弹窗-->
  <!--<el-dialog v-model="dialogValue.video.show" width="30%" draggable>
    <video ref="videoPlayer" controls :src="dialogValue.video.url"></video>
  </el-dialog>-->

</template>

<style lang="scss">

* {
  padding: 0;
  margin: 0;
  border: 0;
}

.all {
  display: flex;
  flex-direction: column;

}

.search {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.head {
  display: flex;
  flex-direction: row;

  div:not(.btn) {
    margin-right: 10px;
  }
}

.operate {
  display: flex;
  color: #06a7ff;
  justify-content: flex-end;
  margin-left: auto;

  div {
    display: flex;
    width: 23px;
    margin: 0 3px;
    align-content: center;
    align-items: center;
  }
}

.smallHands {
  cursor: pointer;
}

.right2 {
  margin-left: 20px;
}

.right1 {
  cursor: pointer;
}

.link {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的颜色 */
}

.header-text {
  color: #05a1f5;
  font-size: 25px;
  font-weight: bold;
  align-content: center;
  align-items: center;
}

.content {
  margin: 15px;
  width: calc(100vw - 260px);
}

.header-icon-div {
  margin: 0 5px;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 40px;
}

.header-left {
  display: flex;
  margin-left: 20px;
  align-items: center;
  align-content: center;
}

.header {
  display: flex;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #eeeeee;
  align-content: center;
  align-items: center;
}

.header-icon {
  color: #05a1f5;
}

.progressBar {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  margin-left: 12px;
  background-color: #fff;
}

.menu {
  display: flex;
  flex-grow: 1;
  width: 100%;
}

.menu-list {
  display: flex;
  background-color: #ffffff;
  flex-direction: column;
  border-right: 1px solid #eeeeee;
  width: 80px;

  div { //menu-item
    display: flex;
    flex-direction: column;
    width: 80px;
    height: 80px;
    align-content: center;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }

    div {
      display: flex;
      width: auto;
      height: auto;
    }
  }
}

.menuTwo {
  border-right: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  width: 180px;

  .menu-sub-list {
    flex-grow: 1;

  }
}

.menu-sub-list {
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  width: 170px;
  align-content: center;
  align-items: center;
  background-color: #ffffff;

  div {
    display: flex;
    flex-direction: row;
    border-radius: 7px;

    div {
      margin-left: 12px;
      margin-right: 12px;
    }
  }
}

.text2 {

  span {
    font-size: 13px;
  }
}

.menu-item-sub-list {
  height: 40px;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 170px;

  &:hover {
    background-color: #f5f5f5;
    cursor: pointer;
  }
}

.menu-item-top {
  background-color: #f0f9ff;
  margin-top: 13px;
}

</style>